import { Picker } from '@ray-js/smart-ui';
import { showToast } from '@ray-js/ray';
import React, { useCallback } from 'react';
import Strings from '@/i18n';
import styles from './index.module.less';

export function CountDownPicker({
  current,
  setCurrentCD,
}: {
  current: number;
  setCurrentCD: (val: number) => void;
}) {
  const hour = Math.floor(current / 60);
  const minute = current % 60;

  const columns = [
    {
      values: new Array(24).fill(1).map((x, i) => i),
      style: { flex: 'none', width: 'auto', minWidth: '120px', mariginLeft: '20px' },
      fontStyle: { fontSize: '20px' },
      unit: Strings.getLang('hour'),
      defaultIndex: hour,
    },
    {
      values: [':'],
      disabled: true,
      style: {
        flex: 'none',
        display: 'flex',
        justifyContent: 'center',
        minWidth: '10px',
      },
      fontStyle: { fontSize: '20px', color: '#000 ' },
    },
    {
      values: new Array(60).fill(1).map((x, i) => i),
      style: { flex: 'none', width: 'auto', minWidth: '120px', textAlign: 'left' },
      fontStyle: { fontSize: '20px' },
      unit: Strings.getLang('minute'),
      defaultIndex: minute,
    },
  ];

  const onChange = useCallback(event => {
    const { value } = event.detail;
    const time = value[0] * 60 + value[2];
    setCurrentCD(time);
  }, []);

  return (
    <Picker
      columns={columns}
      onChange={onChange}
      className={styles.picker}
      visibleItemCount={3}
      activeStyle={{
        color: '#000',
      }}
    />
  );
}
